import React from 'react'
import { connect } from 'react-redux'
import { Icon, Switch, Select, Radio, Checkbox } from 'antd'
import {messages} from "share/common";
import LanguageInput from 'components/template/language-input/language-input';
const Option = Select.Option;
const RadioGroup = Radio.Group;

class LinkageSwitchItem extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      fieldName: '',
      fieldNameI18n: [],
      promptInfo: '',
      promptInfoI18n: [],
      customEnumerationOID: "",
      fieldType: 'TEXT',
      required: false
    }
  }

  componentWillMount(){
    const {
      fieldName, promptInfo, fieldType, fieldNameI18n, promptInfoI18n, customEnumerationOID, required
    } = this.props.item;

    let tempFieldNameI18n = fieldNameI18n;
    let tempPromptInfoI18n = promptInfoI18n;
    if(!fieldNameI18n){
      tempFieldNameI18n = [];
      tempPromptInfoI18n = [];
      this.props.languageList.map(language => {
        tempFieldNameI18n.push({
          language: language.code,
          value: ''
        });
        tempPromptInfoI18n.push({
          language: language.code,
          value: ''
        })
      });
    }

    this.setState({
      fieldName,
      promptInfo,
      fieldType,
      fieldNameI18n: tempFieldNameI18n,
      promptInfoI18n: tempPromptInfoI18n,
      customEnumerationOID,
      required
    })
  }

  handleLanguageInput = (value, i18n, attr) => {
    this.setState({
      [attr]: value,
      [attr + 'I18n']: i18n
    }, this.onChange)
  };

  handleChangeEnumeration = (value) => {
    this.setState({ customEnumerationOID: value }, this.onChange)
  };

  handleChangeFieldType = (e) => {
    let value = e.target.value;
    this.setState({
        fieldType: value,
        customEnumerationOID: value === 'TEXT' ? '' : this.state.customEnumerationOID
      },
      this.onChange)
  };

  handleChangeRequired = (e) => {
    let value = e.target.checked;
    this.setState({ required: value }, this.onChange)
  };

  onChange = () => {
    const { item } = this.props;
    const { fieldName, promptInfo, fieldType, fieldNameI18n,
      promptInfoI18n, customEnumerationOID, required } = this.state;
    item.fieldName = fieldName;
    item.promptInfo = promptInfo;
    item.fieldType = fieldType;
    item.fieldNameI18n = fieldNameI18n;
    item.promptInfoI18n = promptInfoI18n;
    item.customEnumerationOID = customEnumerationOID;
    item.required = required;
    this.props.onChange(item);
  };

  render() {
    const { enumerations, onDelete } = this.props;
    const { fieldName, fieldNameI18n, promptInfo, promptInfoI18n,
      customEnumerationOID, fieldType, required } = this.state;
    return (
      <div className="linkage-switch-item">
        <Icon type="close" className="delete-item" onClick={onDelete}/>
        <div className="form-title">{messages('components.key560'/*联动类型*/)}</div>
        <div className="radio-area">
          <RadioGroup onChange={this.handleChangeFieldType}
                      value={fieldType}>
            <Radio value="TEXT">{messages('components.key561'/*输入*/)}</Radio>
            <Radio value="CUSTOM_ENUMERATION">{messages('components.key562'/*选择*/)}</Radio>
          </RadioGroup>
        </div>
        <div className="check-box-area">
          <Checkbox onChange={this.handleChangeRequired} checked={required}>
            {messages('components.key563'/*必填*/)}
            </Checkbox>
        </div>

        {
          fieldType === 'TEXT' ? null : (
            <div>
              <div className="form-title">{messages('components.key564'/*选择列表*/)}</div>
              <Select onChange={this.handleChangeEnumeration}
                      getPopupContainer={triggerNode => triggerNode.parentNode}
                      value={customEnumerationOID}>
                {enumerations.data.map(item => (
                  <Option key={item.customEnumerationOID}>{item.name}</Option>
                ))}
              </Select>
            </div>
          )
        }
        <div className="form-title">{messages('components.key565'/*外部标题*/)}</div>
        <LanguageInput nameChange={(value, i18n) => this.handleLanguageInput(value, i18n, 'fieldName')}
                       width={'100%'}
                       name={fieldName}
                       isEdit
                       i18nName={fieldNameI18n}/>
        <div className="form-title">{messages('components.key566'/*提示文字*/)}</div>
        <LanguageInput nameChange={(value, i18n) => this.handleLanguageInput(value, i18n, 'promptInfo')}
                       width={'100%'}
                       name={promptInfo}
                       isEdit
                       i18nName={promptInfoI18n}/>
      </div>
    )
  }
}

LinkageSwitchItem.propTypes = {
  enumerations: React.PropTypes.object,
  item: React.PropTypes.object,
  onDelete: React.PropTypes.func,
  onChange: React.PropTypes.func
};

LinkageSwitchItem.defaultProps = {};

function mapStateToProps(state) {
  return {
    languageList: state.login.languageList
  }
}

export default connect(mapStateToProps)(LinkageSwitchItem)
